<template>
  <div>
    <el-upload
      ref="upload"
      action=""
      :before-upload="onBeforeUpload"
      :http-request="onUpload"
      :on-remove="onRemove"
      :on-preview="onPreview"
      :file-list="fileList"
      :show-file-list="true"
    >
      <el-button
        v-show="!info.url"
        size="small"
        type="primary"
        plain
        icon="el-icon-upload2"
        class="uploadBtn"
      >上传文件</el-button>
      <el-button
        v-show="info.url"
        size="small"
        type="success"
        plain
        icon="el-icon-check"
        class="uploadBtn"
        disabled
      >上传成功</el-button>
      <div slot="tip" class="el-upload__tip">
        {{ tipContent }}
      </div>
    </el-upload>
    <el-dialog :visible.sync="visible" class="previewBox">
      <img :src="info.url" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
/*
返回父组件上传的url
*/
import { uploadAPI } from '@/api/common'

export default {
  props: {
    tipContent: {
      type: String,
      default: '支持扩展名...'
    }, // tip的内容
    fileArray: Array, // 文件后缀
    fileSize: Number, // 文件大小
    type: String,
    fileList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      visible: false,
      info: {
        id: 0,
        name: '',
        url: ''
      }
    }
  },
  watch: {
    fileList(val) {
      const [{ name, url }] = val
      this.info.name = name
      this.info.url = url
    }
  },

  methods: {
    // 上传前校验文件类型和大小
    async onBeforeUpload(file) {
      // 校验文件大小和类型
      const addTypeArray = file.name.split('.')
      const addType = addTypeArray[addTypeArray.length - 1]

      const isJPG = this.fileArray.includes(addType)

      const isLt5M = file.size / 1024 / 1024 < this.fileSize

      if (!isJPG) {
        this.$message.error('上传文件格式错误')
        return Promise.reject(false)
      }
      if (!isLt5M) {
        this.$message.error(`上传文件大小不能超过${this.fileSize}MB!`)
        return Promise.reject(false)
      }
      return isJPG && isLt5M
    },
    async onUpload(params) {
      // 获取上传的文件类型转为formdata
      if (params.file) {
        const data = new FormData()
        data.append('file', params.file)
        data.append('type', this.type) // 上传类型，1、企业营业执照businessLicense2、租赁合同附件contract
        // 调用上传接口
        const res = await uploadAPI(data)
        this.info.url = res.url
        this.info.id = res.id
        this.$emit('onSuccess', this.info)
      }
    },
    onRemove() {
      this.info.id = 0
      this.info.url = ''
      this.fileList = []
    },
    onPreview(file) {
      const fileTypeArr = file.name.split('.')
      const fileType = fileTypeArr[fileTypeArr.length - 1]
      // 上传图片的预览 图片弹框预览
      if (['png', 'jpg', 'jpeg'].includes(fileType)) { this.visible = true }
      // .pdf文件，直接open
      if (fileType === 'pdf') window.open(this.info.url)
      // .doc .excel .docx文件 office的在线服务
      if (['doc', 'docx', 'xls'].includes(fileType)) {
        const url = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.info.url
        window.open(url, '_blank')
      }
    },
    clear() {
      this.onRemove()
      this.$refs.upload.clearFiles()
    }

  }

}
</script>

<style lang="scss" scoped>
.uploadBtn {
  border: none;
}
::v-deep .el-dialog {
  width: 60%;
  padding-bottom: 20px;
}
</style>
